<template>
  <div id="lsc">
    <el-form :rules="rules" size="mini" :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="日期">
        <el-date-picker
          v-model="value2"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="init">查询</el-button>
      </el-form-item>
    </el-form>
    <div id="luckysheet3"></div>
  </div>
</template>

<script>
import LuckyExcel from 'luckyexcel';
import {Message} from "element-ui";
import moment from "moment";
import {getLastWeek} from "./data";

export default {
  name: "daySheet2",
  props:
    {
      excelConfigId: {
        type: String,
        default: "1005275023898529792",
      }
    }
  ,
  created() {
    console.log(111, this.excelConfigId)
    this.init();
  },
  methods: {
    init() {
      this.axios.post('/jmreport/exportAllExcelStream', {
        "excelConfigId": this.excelConfigId,
        "queryParam": {
          "pageNo": "1",
          "pageSize": 10,
          "currentPageNo": "1",
          "currentPageSize": 10,
          "startDay": moment(this.value2[0]).format('yyyy-MM-DD'),
          "endDay": moment(this.value2[1]).format('yyyy-MM-DD')
        }
      }, {responseType: 'arraybuffer'}).then(res => {

        let blob = new Blob([res.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});

        let file = new File([blob], "example.xlsx", {
          type: blob.type,
        });

        this.file = file;

        LuckyExcel.transformExcelToLucky(file, function (exportJson, luckysheetfile) {
            if (exportJson.sheets == null || exportJson.sheets.length === 0) {
              Message.warning("读取excel文件内容失败");
              return;
            }
            exportJson.sheets[0]["zoomRatio"] = 0.8;
            const options = {
              container: 'luckysheet3',
              showinfobar: false,
              data: exportJson.sheets,
              showsheetbar: false,
              sheetFormulaBar: false,
            };
            luckysheet.destroy()
            luckysheet.create(options);
          }, function (err) {
            Message.warning('Import failed. Is your fail a valid xlsx?');
          }
        );

      })
    },
  },
  data() {
    return {
      xs: null,
      fileList: [],
      file: null,
      autoGenerateColumns: false,
      spread: null,
      selectedFile: null,
      rules: {
        value2: [
          {
            type: 'array',
            required: true,
            message: '请选择日期区间',
            fields: {
              0: {type: 'date', required: true, message: '请选择开始日期'},
              1: {type: 'date', required: true, message: '请选择结束日期'}
            }
          }
        ]
      },
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '本周',
          onClick(picker) {
            const end = moment().weekday(7).format('yyyy-MM-DD');
            const start = moment().weekday(1).format('yyyy-MM-DD');
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '上周',
          onClick(picker) {
            picker.$emit('pick', getLastWeek(1));
          }
        }]
      },
      value1: '',
      value2: [moment().format('yyyy-MM-DD'), moment().format('yyyy-MM-DD')],
      formInline: {}
    };
  },
  mounted() {
  }
}
</script>

<style scoped>
#luckysheet3, #lsc {
  margin: 0px;
  padding: 0px;
  position: relative;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
}
</style>
